<template>
    <div class="userContainer">
        <div class="userText">欢迎您使用点餐小程序后台管理系统！</div>
        <el-dropdown class="userID">
            userID: {{ userID }}
            <template #dropdown>
                <el-dropdowm-menu>
                    <el-dropdown-item @click="exitLogin">退出登录</el-dropdown-item>
                </el-dropdowm-menu>
            </template>
        </el-dropdown>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import router from '../router';
import { ElMessage } from 'element-plus';

const userID = ref("暂无此用户");

const exitLogin = () => {    
    localStorage.removeItem("user");
    ElMessage.success("退出登录成功");
    router.push("/");
};

onMounted(() => {
    const userStr = localStorage.getItem("user");
    // console.log(userStr)
    if (userStr) {
        const user = JSON.parse(userStr);
        userID.value = user.data.managerID || "暂无此用户";
    } else {
        console.error("No user found in localStorage");
    }
});
</script>

<style>
body,
#app {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    margin: 0%;
    padding: 0%;
}

.userContainer {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-inline: 5%;
    width: 90%;
    height: 5%;
    background-color: #8a8a8a;
}

.userText {
    font-family: "宋体";
    letter-spacing: 2px;
    width: 85%;
    font-weight: 600;
    color: #ffffff;
}

.userID {
    display: flex;
    white-space: nowrap;
    font-family: "宋体";
    letter-spacing: 1px;
    color: #ffffff;
    width: 20%;
}
</style>